import Modal from './modal.vue'

Modal.newInstance = props => {
  const div = document.createElement('div')

  div.innerHTML = `
    <Modal v-model="visible" :width="width" :title="title" footer-hide :firework="firework" :show-title="showTitle" @on-cancel="onCancel" :closeable="closeable"
    :footer-style="footerStyle" :content-style="contentStyle" >
      <div v-html="html" v-if="html"></div>
      <component v-for="com in customComponentsData" :ref="com.name" v-bind="com.props" :is="com.component" ></component>
      <div class="t-modal-center" v-if="!html">{{ content }}</div>
      <template slot="footer" v-show="isShowFoot">
<!--        <a class="t-modal-btn t-modal-cancel" v-if="showCancel" @click="cancel">{{ cancelText }}</a>-->
      <div v-if="showCancel" style="width: 40%;height: 0.8rem;margin-right: .4rem;line-height: 0.8rem;background: #F0F2F5;;border-radius: .4rem;" @click="cancel">   <a class="t-modal-btn t-modal-cancel">{{ cancelText }}</a></div>
      <div style="width: 40%;height: 0.8rem;line-height: 0.8rem;background: #005EED;border-radius: .4rem;" @click="ok" ><a class="t-modal-btn t-modal-ok" id="contentBtn" data-clipboard-target="#content"  :style="okStyle">{{ okText }}</a></div>
      </template>
    </Modal>
  `
  document.body.appendChild(div)

  const modal = new Vue({
    el: div,
    data: {
      visible: false,
      closeable: true,
      width: '5.3rem',
      title: '温馨提示',
      firework: false,
      content: '',
      html: '',
      customComponentsData: null,
      okText: '确认',
      cancelText: '取消',
      showCancel: true,
      showTitle: true,
      okStyle: {},
      footerStyle: {},
      isShowFoot: true,
      contentStyle: {}
    },
    components: {
      Modal
    },
    methods: {
      cancel() {
        this.$children[0].visible = false
        this.onCancel()
        this.remove()
      },
      ok() {
        this.$children[0].visible = false
        this.onOk(this);
        this.remove()
      },
      remove() {
        setTimeout(() => {
          this.destroy()
        }, 300);
      },
      destroy() {
        this.$destroy()
        document.body.removeChild(this.$el)
        this.onRemove()
      },
      onOk() {
      },
      onCancel() {
      },
      onRemove() {
      }
    }
  }).$children[0]
  console.log(modal)
  return {
    show(props) {
      modal.$parent.showCancel = props.showCancel

      if ('width' in props) {
        modal.$parent.width = props.width
      }
      if ('title' in props) {
        modal.$parent.title = props.title
      }
      if ('showTitle' in props) {
        modal.$parent.showTitle = props.showTitle
      }
      if ('closeable' in props) {
        modal.$parent.closeable = props.closeable
      }
      if ('firework' in props) {
        modal.$parent.firework = props.firework
      }
      if ('content' in props) {
        modal.$parent.content = props.content
      }
      if ('html' in props) {
        modal.$parent.html = props.html
      }
      if ('customComponentsData' in props) {

        props.customComponentsData.forEach((item) => {
          modal.$parent.$options.components[item.name] = item.component;
        })
        modal.$parent.customComponentsData = props.customComponentsData

      }
      if ('footerStyle' in props) {
        modal.$parent.footerStyle = props.footerStyle
      }
      if ('contentStyle' in props) {
        modal.$parent.contentStyle = props.contentStyle
      }
      if ('isShowFoot' in props) {
        modal.$parent.isShowFoot = props.isShowFoot
      }
      if ('okStyle' in props) {
        modal.$parent.okStyle = props.okStyle
        //modal.$parent.okStyle.marginLeft=0;
        modal.$parent.okStyle.background = "unset";
        modal.$parent.okStyle.color = "#fff";
        modal.$parent.okStyle.lineHeight = ".8rem";
      }
      if ('okText' in props) {
        modal.$parent.okText = props.okText
      }
      if ('cancelText' in props) {
        modal.$parent.cancelText = props.cancelText
      }
      if ('onCancel' in props) {
        modal.$parent.onCancel = props.onCancel
      }
      if ('onOk' in props) {
        modal.$parent.onOk = props.onOk
      }

      modal.$parent.onRemove = props.onRemove

      modal.visible = true
    },
    remove() {
      modal.visible = false
      modal.$parent.remove()
    },
    component: modal
  }
}

export default Modal
